import styled from 'styled-components'

export const HeaderWrapper = styled.div`
    .app-nav {
        width: 100vw;
        height: 70px;
        background-color: #242424;

        .content {
            width: 1100px;
            margin: 0 auto;
            display: flex;
        }
    }

    .b-line {
        width: 100vw;
        height: 5px;
        background-color: #c20c0c;
    }
`

export const HeaderLeft = styled.div`
    .leftWarp {
        display: flex;
        width: 764px;

        .logo {
            width: auto;
            font-size: 25px;
            line-height: 70px;
            color: white;
            padding: 0 20px;
            display: flex;
            align-items: center;

            img {
                width: 35px;
                height: 35px;
                margin: 0 10px;
            }
        }

        .item {
            width: auto;
            line-height: 70px;
            color: #c3c3c3;

            padding: 0 20px;

            &:hover {
                color: white;
                background-color: black;
            }
        }

        .active {
            color: white;
            background-color: black;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: calc(50% - 3px);
                border-width: 6px;
                border-style: solid;
                border-color: transparent transparent #c20c0c transparent;
            }
        }
    }
`

export const HeaderRight = styled.div`
    .rightWarp {
        width: 336px;
        display: flex;
    }

    .searchContent {
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;

        > .search {
            width: 158px;
            height: 32px;
            border-radius: 16px;

            input {
                &::placeholder {
                    font-size: 12px;
                }
            }
        }
    }

    .art-cen {
        display: flex;
        justify-content: center;
        align-items: center;

        button {
            width: 90px;
            height: 32px;
            background-color: #242424;
            font-size: 12px;
            color: #c3c3c3;
            border: 1px solid #c3c3c3;
            border-radius: 16px;
            cursor: pointer;
        }
    }

    .login {
        display: flex;
        justify-content: center;
        align-items: center;

        span {
            width: auto;
            line-height: 12px;
            font-size: 12px;
            color: #c3c3c3;
            margin: 0 10px;

            &:hover {
                text-decoration: underline;
                cursor: pointer;
            }
        }
    }
`
